<template>
    <div class="bmk">
        <!-- 单词本渲染 -->
        <div v-for="(item, index) in shujv2" :key="index">
            <div class="b" @click="get(item.id, item.name)">
                <Dcb :sz="item" :cunz="true"></Dcb>
            </div>
        </div>
        <!-- 添加单词本 -->
        <div class="tinajia">
            <van-empty description="添加单词本">
                <van-button round type="primary" class="bottom-button" @click="tinajiadcb">添加</van-button>
            </van-empty>
        </div>
        <!-- 添加单词本弹出层 -->
        <van-dialog :beforeClose="tainjia" v-model="show" title="添加单词本" show-cancel-button>
            <van-field v-model="danchiben.mz" name="单词本名字" label="单词本名字" placeholder="请输入单词本名字" />
            <van-field name="radio" label="收藏单词本">
                <template #input>
                    <van-radio-group v-model="danchiben.radio" direction="horizontal">
                        <van-radio name="false" checked>不收藏</van-radio>
                        <van-radio name="true">收藏</van-radio>

                    </van-radio-group>
                </template>
            </van-field>
        </van-dialog>

    </div>
</template>

<script>
// 注意，使用了vuex
import { mapState, mapMutations } from "vuex";
import Dcb from "../../components/dcbzj.vue";

export default {
    computed: {
        ...mapState(["hqjs"]),
    },
    methods: {

        //  (没有服务器，暂时弃用)注意：这里导入了vuex的方法,把服务器获取到的数据储存到store.js里
        // ...mapMutations(["csj"]),
        ...mapMutations(["csj2", "tianjiadcb"]),
        tinajiadcb() {
            this.show = !this.show
        },
        get(id, name) {
            //(没有服务器，暂时弃用)
            /*   let data = this.data;
            注意：这里使用vuex导入的方法，data为服务器获取到的数据，在调用created()时注意数据存放顺序
            this.csj(data); */

            this.csj2(id);
            console.log(name, 'cy');
            this.$router.push({
                path: "/danciben/" + id,
                // 把单词本名字放到路由储存
                query: { name },
            });
        },
        chuli() {
            // 处理Vuex的数据(该方法应该放入Vuex的getters进行处理，后续需要优化)
            console.log(this.hqjs);
            // 每次处理数据前，清空旧数据(浪费性能，后续需要优化)
            this.shujv2 = []
            this.hqjs.forEach((item) => {
                console.log(item);
                let num = {
                    id: item.id,
                    dcs: item.zgdc,
                    name: item.cydc,
                    bt: item.cydc + "常见单词",
                    img: item.img,
                };

                this.shujv2.push(num);
            });
            console.log("shujv2", this.shujv2);
        },
        // 关闭弹出层时清空输入框内容
        guanbi() {
            this.danchiben = {
                // 单词本名字
                mz: '',
                // 单词是否收藏（赋值为字符串，不是布尔值）
                radio: null
            }
        },
        // 添加单词本事件
        tainjia(action, dome) {
            if (action === "confirm") { // 点击确定走这里
                //判断是否都填写了
                if (this.danchiben.mz && this.danchiben.radio) {
                    // 再判断单词本名字有没有重复
                    if (this.hqjs.some(item => item.cydc == this.danchiben.mz)) {
                        Notify({ type: 'danger', message: '该单词本已存在' })

                        dome(false)
                    } else {
                        console.log(this.danchiben, '单词本名字')
                        // 调用Vuex的添加单词本方法
                        this.tianjiadcb(this.danchiben)
                        this.chuli()
                        Notify({ type: 'success', message: '单词本添加成功' })
                        // 清空输入框
                        this.danchiben = {
                            // 单词本名字
                            mz: '',
                            // 单词是否收藏（赋值为字符串，不是布尔值）
                            radio: null
                        }
                        dome()  // done()里可以放true和false来控制
                    }

                } else {

                    dome(false)//没填写就不放行
                }
            }
            else {// 点击取消走这里
                this.danchiben = {
                    // 单词本名字
                    mz: '',
                    // 单词是否收藏（赋值为字符串，不是布尔值）
                    radio: null
                }
                dome()
            }

            console.log(this.danchiben, 'this.danchiben')
        }
    },

    data() {
        return {
            shujv2: [],
            data2: [],
            // 控制添加弹出层
            show: false,
            // 创建单词本数据
            danchiben: {
                // 单词本名字
                mz: '',
                // 单词是否收藏
                radio: null
            },
            // 该数据为服务器获取的数据，暂时报废
            /*   shujv: {
              a: {
                id: 1,
                dcs: "123", //单词数量
                bt: "js常见单词", //单词表的标题
                img: "https://img01.yzcdn.cn/vant/cat.jpeg", //单词表的图片
              },
              b: {
                id: 2,
                dcs: "233",
                bt: "css常见单词",
                img: "https://img01.yzcdn.cn/vant/cat.jpeg",
              },
              c: {
                id: 3,
                dcs: "2133",
                bt: "jquer常见单词",
                img: "https://img01.yzcdn.cn/vant/cat.jpeg",
              },
              d: {
                id: 4,
                dcs: "33",
                bt: "vue常见单词",
                img: "https://img01.yzcdn.cn/vant/cat.jpeg",
              },
            }, */

            // (没有服务器，暂时弃用)服务器获取的数据
            /* data: {
              data1: {
                xr1: {
                  id: 1,
                  dc: "abcdsadsadasdsad",
                  label: "1侦听2器2",
                },
                xr2: {
                  id: 2,
                  dc: "okokok",
                  label: "2侦听2器2",
                },
                xr3: {
                  id: 3,
                  dc: "abcdsadsadasdsad",
                  label: "3侦听2器2",
                },
                xr4: {
                  id: 4,
                  dc: "abcdsadsadasdsad",
                  label: "4侦听2器2",
                },
                xr5: {
                  id: 5,
                  dc: "abcdsadsadasdsad",
                  label: "5侦听2器2",
                },
                xr6: {
                  id: 6,
                  dc: "abcdsadsadasdsad",
                  label: "6侦听2器2",
                },
                xr7: {
                  id: 7,
                  dc: "abcdsadsadasdsad",
                  label: "7侦听2器2",
                },
                xr8: {
                  id: 8,
                  dc: "abcdsadsadasdsad",
                  label: "8侦听2器2",
                },
                xr9: {
                  id: 9,
                  dc: "abcdsadsadasdsad",
                  label: "9侦听2器2",
                },
              },
              data2: {
                yzw: 23, //已掌握
                yx: 23, //已学
                wx: 29, //未学
              },
            }, */
        };
    },
    created() {
        // 注意与获取服务器数据的方法排序
        this.chuli();
    },
    components: {
        Dcb,
    },
};
import { Notify } from 'vant';
</script>

<style lang="less" scoped>
.bmk {
    margin-bottom: 50px;
}

.b {
    margin-top: 3px;
    box-sizing: border-box;
    position: relative;
}

.b:nth-child(n + 2)::after {
    content: '';
    display: block;
    width: 90%;
    height: 1px;
    position: absolute;
    top: 0px;
    border-top: 1px solid rgb(85, 84, 84);
}
.tinajia {
    margin-top: 40px;
}
.bottom-button {
    width: 160px;
    height: 40px;
}
</style>